<!DOCTYPE html>
<html>
  <head>
    <title>表盘</title>
    <style>
      body {
        background-color: #add8e6;
      }
      .clock {
        width: 300px;
        height: 300px;
        background: linear-gradient(90deg, #ffc0cb, #ff00ff);
        border-radius: 50%;
        margin: 0 auto;
        position: relative;
        border: 10px solid #fff;
      }
      .clock::after {
        content: "";
        width: 160px;
        height: 160px;
        background: #fff;
        position: absolute;
        border-radius: 50%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
      }
      .hr {
        width: 200px;
        height: 10px;
        background: #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 3;
        border-radius: 5px;
      }
      .hr::before {
        content: "";
        width: 10px;
        height: 10px;
        background: #fff;
        position: absolute;
        border-radius: 50%;
        top: -5px;
        left: -205px;
        transform: rotate(90deg);
      }
      .min {
        width: 180px;
        height: 10px;
        background: #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 4;
        border-radius: 5px;
      }
      .min::before {
        content: "";
        width: 10px;
        height: 10px;
        background: #fff;
        position: absolute;
        border-radius: 50%;
        top: -8px;
        left: -190px;
        transform: rotate(90deg);
      }
      .sec {
        width: 150px;
        height: 3px;
        background: #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 5;
        border-radius: 5px;
      }
      .sec::before {
        content: "";
        width: 3px;
        height: 3px;
        background: #fff;
        position: absolute;
        border-radius: 50%;
        top: -11px;
        left: -155px;
        transform: rotate(90deg);
      }
      .num {
        font-size: 16px;
        font-weight: bold;
        color: #fff;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        text-align: center;
        line-height: 300px;
        z-index: 6;
      }
      .hr,
      .min,
      .sec {
        animation: rotate 60s linear infinite;
      }
      @keyframes rotate {
        0% {
          transform: translate(-50%, -50%) rotate(0deg);
        }
        100% {
          transform: translate(-50%, -50%) rotate(360deg);
        }
      }
    </style>
  </head>
  <body>
    <div class="clock">
      <div class="hr"></div>
      <div class="min"></div>
      <div class="sec"></div>
      <div class="num">
        <span>12</span>
        <span>3</span>
        <span>6</span>
        <span>9</span>
      </div>
    </div>
  </body>
</html>
